<template>
    <div class="login-page">
        <img src="../assets/img/bg.jpg" class="bg-img" alt="">
        <transition enter-active-class="animate__animated animate__flipInY">
            <div class="login-box" v-show="isShow">
            <h2 class="box-title">
                <el-icon size="34px" style="margin-right:5px;">
                    <Platform />
                </el-icon>
                华夏影院管理平台
            </h2>
            <!-- 表单 -->
            <el-form ref="loginForm" :rules="formDataRules" :model="formData" class="login-form">
                <el-form-item prop="account">
                    <el-input v-model="formData.account" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input v-model="formData.pwd" show-password placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-switch v-model="formData.saveAccount" active-text="记住账号"></el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button @click="submitForm" type="primary" class="btn-login">登录系统</el-button>
                </el-form-item>
            </el-form>
        </div>
        </transition>
        
    </div>
</template>
<script>
import {Platform} from "@element-plus/icons-vue";
import {ElMessage,ElMessageBox} from "element-plus";
export default {
    name:"Login",
    components:{
        Platform:Platform
    },
    data() {
        //这个方法返回的对象才是接管页面的数据
        return {
            formData:{
                account:"",
                pwd:"",
                saveAccount:false
            },
            formDataRules:{
                account:[
                    { required:true,message:"手机号不能为空",trigger:"blur" }
                ],
                pwd:[
                    { required:true,message:"密码不能为空",trigger:"blur" }
                ]
            },
            //给一个数据来控制隐藏还是显示
            isShow:false
        }
    },
    //负责接管页面的事件，方法
    methods: {
        submitForm() {
            //validate调用表单验证的方法
            this.$refs["loginForm"].validate(valid=>{
                if(valid) {
                    //表单验证通过
                    if(this.formData.account == "18062552563" && this.formData.pwd == "123456") {
                        //登录成功
                        ElMessageBox.alert("登录成功","提示",{
                            type:"success",
                            //回调 点击"ok"以后再跳转页面
                            callback:()=>{
                                //跳转到manager页面,因为使用了app.use(router),所以可以使用this.$router来获取路由管理
                                //通过push跳转的页面是可以返回的，通过replace跳转的页面不可以返回
                                this.$router.replace({
                                    name:"Manager"
                                });
                            }
                        });
                    }
                    else {
                        //表单验证没有通过
                        ElMessageBox.alert("账号或密码错误","提示",{
                            type:"error"
                        });
                    }
                }
                else {
                    //表单验证没有通过
                    ElMessage.error("请输入手机号和密码后登录");
                }
            });
        }
    },
    //接管页面以后的生命周期
    mounted() {
        //设置500毫秒以后
        setTimeout(()=>{
            this.isShow=true;
        },500);
    }
}

</script>
<!-- scoped CSS只在当前页面有效 -->
<style lang="scss" scoped>
.login-page {
    width: 100%;
    height: 100%;
    position: relative;
    .bg-img {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
    }
    .login-box {
        width: 400px;
        height: 300px;
        background-color: #fff;
        position: absolute;
        left: calc(50% - 200px);
        top: 150px;
        box-shadow: 0px 0px 15px 5px gray;
        box-sizing: border-box;
        padding: 10px;
        .box-title {
            display: flex;
            justify-content: center;
            padding: 10px 0;
            border-bottom: 1px dashed gray;
        }
        .login-form {
            margin-top: 15px;
            .btn-login {
                width: 100%;
            }
        }
    }
}
</style>